import '../10.20-分页渲染/index.css'
let {list} = require('../10.20-分页渲染/data.js')
let ul = document.querySelector('.content > ul');
let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');
let totalBox = document.querySelector('.total');
let selectBox = document.querySelector('select');
// let list;

let data = list.length;
let selvalue = selectBox.value;
let nowpage = 1;
let allpage = Math.ceil(data / selvalue);
xuan();
btn();

//渲染
function xuan() {
    selvalue = selectBox.value;
    allpage = Math.ceil(data / selvalue);
    nowpage = Number(totalBox.innerHTML.substring(0, 1));
    totalBox.innerHTML = `${nowpage} / ${allpage}`;
    ul.innerHTML = '';
    for (
        let i = (nowpage - 1) * selvalue;
        i <= nowpage * selvalue - 1 && i < list.length;
        i++
    ) {
        ul.innerHTML += `<li>
        <img src="${list[i].pic}" alt=""/>
        <p>${list[i].name}</p>
        <p>城市: ${list[i].city}</p>
        <p>地址: ${list[i].address}</p>
        <p>价格: ${list[i].price}</p>
        <p>演出时间: ${list[i].showTime}</p>
      </li>`;
    }
}
selectBox.addEventListener('change', () => {
    nowpage = 1;
    totalBox.innerHTML = `${nowpage} / ${allpage}`;
    xuan();
    btn();
});

// 上一张
prevBtn.addEventListener('click', () => {
    nowpage = Number(totalBox.innerHTML.substring(0, 1));
    if (nowpage != 1) {
        nowpage--;
        allpage = Math.ceil(data / selvalue);
        totalBox.innerHTML = `${nowpage} / ${allpage}`;
    }
    xuan();
    btn();
});

// 下一张
nextBtn.addEventListener('click', () => {
    nowpage = Number(totalBox.innerHTML.substring(0, 1));
    if (nowpage != allpage) {
        nowpage++;
        totalBox.innerHTML = `${nowpage} / ${allpage}`;
    }
    xuan();
    btn();
});

//按钮失效
function btn() {
    let pageNum;
    pageNum = Number(totalBox.innerHTML.substring(0, 1));
    allpage = Math.ceil(data / selvalue);
    if (nowpage === 1) {
        prevBtn.classList.add('disable');
    } else {
        prevBtn.classList.remove('disable');
    }
    if (nowpage === allpage) {
        nextBtn.classList.add('disable');
    } else {
        nextBtn.classList.remove('disable');
    }
    console.log(pageNum);
}
